<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>编辑个人资料</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="/Scripts/vue.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<script src="index.js" type="text/javascript"></script>
	<script src="load.js" type="text/javascript"></script>
	<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
	<style type="text/css">
		body{
			background-color:#ECECEC;
		}
		img{
			margin:0px;
			padding:0px;
		}
		.user-box{
			padding-top:20px;
		}
		.userName{
			font-weight:bold;
			font-size:28px;
			padding-right:30px;
		}
		.user-box span{
			cursor:pointer;
		}
		.information-size{
			font-size:17px;
			font-weight:bold;
		}
		.form-tr-border{
			border-bottom:1px dashed #808080;
			padding-top:30px;
			padding-bottom: 30px;
		}
		.form-tr-top{
			margin-top:12px;
		}
		.form-tr-text{
			
		}
	</style>
</head>
	<div class="topNav-warpper"></div>
	<div class="container col-lg-7 col-lg-offset-2" style="margin-top:70px;" id="app">
		<div>
			<img v-bind:src="topImgUrl"  v-bind:width="topImgWidth" alt="用户封面">
		</div>
		<div class="panel panel-default">
			<!--<div class="panel-heading">
				<div class="panel-title">个人信息</div>
			</div>-->
			<div class="panel-body row user-box">
				<div  class="col-lg-2">
					<img v-bind:src="userImgUrl"  class="img-responsive" alt="用户头像">
				</div>
				<div class="col-lg-7">
					<div class="text-info col-lg-12" @mouseover.stop="userNameM" @mouseout.stop="userNameO" v-if="nameBox"><span class="userName">{{userName}}</span><span v-if="userNameBtn" class="information-size"  v-on:click.stop="nameUpBtnS" id="nameUpBtn">{{ userName==""||userName==null ? "添加用户名":"修改" }}</span></div>
					<!--<table class="table">
						<tbody>
							<tr><td>用户名</td><td><input type="text" class="form-control"> </td></tr>
						</tbody>
					</table>-->
					<form class="form-horizontal " role="form">
						<div class="form-group">
							<label class="control-label col-lg-2"></label>
							<div class="col-lg-8"></div>
						</div>
						<div v-if="nameUpBox" class="form-group">
							<label for="firstname" class="control-label col-lg-3">用户名</label>
							<div class="col-lg-8">
								<input type="text" id="nameText" class="form-control" id="firstname" v-bind:value="userNameUpdata">
							</div>
						</div>
						<div v-if="nameUpBox" class="form-group">
							<label class="control-label col-lg-3"></label>
							<div class="">
								<button type="button" v-on:click="nameBtnSave" class="btn btn-info">保存</button><button type="button" v-on:click="nameBtnCancel" class="btn btn-default col-lg-offset-1">取消</button>
							</div>
						</div>
						
						<!--性别-->
						<div id="gender" class="form-group information-size row form-tr-border" >
							<label class="control-label col-lg-3">性别</label>
							<div v-if="genderBox" class="col-lg-8 ">
								<p class="form-control-static">
									<span>{{gender}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-info form-control-static" v-on:click="genderUpBtn">{{ gender==""||gender==null?"添加性别":"修改" }}</span>
								</p>
							</div>
							<div v-if="genderUpBox" class="row col-lg-8">
								<div class="col-lg-8">
									<select id="genderSelect" class="form-control">
										<option value="男">男</option>
										<option value="女">女</option>
									</select>
								</div>
								<div class="row col-lg-8 form-tr-top">
									<button type="button" v-on:click="genderBtnSave" class="btn btn-info">确定</button>
									<button  type="button" v-on:click="genderBtnCancel" class="btn btn-default col-lg-offset-3">取消</button>
								</div>
							</div>
						</div>
						
						<!--自我介绍-->
						<div id="sign" class="form-group information-size row form-tr-border" >
							<label class="control-label col-lg-3">一句话介绍</label>
							<div v-if="signBox" class="col-lg-8">
								<p class="form-control-static"><span>{{sign}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-info" v-on:click="signUpBtn">{{ sign==null||sign=="" ? '添加一句话介绍':'修改' }}</span></p>
							</div>
							<div v-if="signUpBox" class="col-lg-8">
								<input type="text" id="signText" class="form-control"  placeholder="添加一句话介绍" v-bind:value="signUpText">
								<div class="col-lg-8" style="margin-top:12px;">
									<button type="button" v-on:click="signBtnSave" class="btn btn-info">确定</button>
									<button type="button" v-on:click="signBtnCancel" class="btn-default btn col-lg-offset-2">取消</button>
								</div>
							</div>
						</div>
						
						<!--居住地-->
						<div class="form-group information-size row form-tr-border" id="live">
							<label class="control-label col-lg-3 ">居住地</label>
							<div v-if="liveBox" class="col-lg-8">
								<p class="form-control-static"><span>{{live}}</span></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-info" v-on:click="liveUpBtn">{{ live==""||live==null ? '添加居住地' : '修改' }}</span></p>
							</div>
							<div v-if="liveUpBox" class="col-lg-8">
								<div class="col-lg-7"><input type="text" id="liveText" class="form-control" placeholder="添加居住地" v-bind:value="liveUpText"></div>
								<button type="button" v-on:click="liveBtnSave" class="btn btn-info">确定</button>
								<button type="button" v-on:click="liveBtnCancel" class="btn btn-default ">取消</button>
							</div>
						</div>
				
						<!--所在行业-->
						<div class="form-group information-size row form-tr-border" id="stry">
							<label class="control-label col-lg-3">所在行业</label>
							<div v-if="stryBox" class="col-lg-8">
								<p class="form-control-static"><span>{{stry}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-info" v-on:click="stryUpBtn">{{ stry==""||stry==null ? '请填写行业信息':'修改' }}</span></p>
							</div>
							<div v-if="stryUpBox" class="col-lg-8">
								<div class="col-lg-8">
									<select id="strySelect" class="form-control ">
										<template v-for="site in sites">
											<option v-bind:value="site.title">{{site.title}}</option>
										</template>	
									</select>
								</div>
								<div class="col-lg-8 form-tr-top" >
									<button type="button" v-on:click="stryBtnSave" class="btn btn-info">确定</button>
									<button type="button" v-on:click="stryBtnCancel" class="btn btn-default col-lg-offset-2">取消</button>
								</div>
							</div>
						</div>
				
						<!--职业经历-->
						<div class="form-group information-size row form-tr-border" id="prof">
							<label class="control-label col-lg-3">职业经历</label>
							<div v-if="profBox" class="col-lg-8">
								<p class="form-control-static"><span>{{prof}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-info" v-on:click="profUpBtn">{{ prof==""||prof==null ? '添加职业经历':'修改' }}</span></p>
							</div>
							<div v-if="profUpBox" class="col-lg-8">
								<div class="col-lg-6"><input type="text" placeholder="公司或组织名称" class="form-control"></div>
								<div class="col-lg-6"><input type="text" placeholder="你的职位（选填）" class="form-control"></div>
								<div class="form-tr-top col-lg-8">
									<button type="button" class="btn btn-info" v-on:click="profBtnSave">确定</button>
									<button type="button" class="btn btn-default col-lg-offset-2" v-on:click="profBtnCancel">取消</button>
								</div>
							</div>
						</div>
				
						<!--教育经历-->
						<div class="form-group information-size row form-tr-border" id="edu">
							<label class="control-label col-lg-3">职业经历</label>
							<div v-if="eduBox" class="col-lg-8">
								<p class="form-control-static"><span>{{edu}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-info" v-on:click="eduUpBtn">{{ edu==""||edu==null ? '添加职业经历':'修改' }}</span></p>
							</div>
							<div v-if="eduUpBox" class="col-lg-8">
								<div class="col-lg-6"><input type="text" placeholder="公司或组织名称" class="form-control"></div>
								<div class="col-lg-6"><input type="text" placeholder="你的职位（选填）" class="form-control"></div>
								<div class="form-tr-top col-lg-8">
									<button type="button" class="btn btn-info" v-on:click="eduBtnSave">确定</button>
									<button type="button" class="btn btn-default col-lg-offset-2" v-on:click="eduBtnCancel">取消</button>
								</div>
							</div>
						</div>
				
						<!--个人简介-->
						<div class="form-group information-size row form-tr-border" id="rodu">
							<label class="control-label col-lg-3">个人简介</label>
							<div v-if="roduBox" class="col-lg-8">
								<p class="form-control-static"><span>{{rodu}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-info" v-on:click="roduUpBtn">{{ rodu==""||rodu==null ? '填写':'修改' }}</span></p>
							</div>
							<div v-if="roduUpBox" class="col-lg-8">
								<textarea id="roduUpText" class="form-control" v-bind:value="roduUpText" rows="3"></textarea>
								<div class="form-tr-top col-lg-8">
									<button type="button" class="btn btn-info" v-on:click="roduBtnSave">确定</button>
									<button type="button" class="btn btn-default col-lg-offset-2" v-on:click="roduBtnCancel">取消</button>
								</div>
							</div>
						</div>
					</form>					
				</div>
		
				<!--右边框-->
				<div id="rightBox" class="col-lg-2"><a class="information-size" href="../">返回个人主页&nbsp;></a></div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		
	</script>
</body>
</html>
